import React from 'react';
import { Form, Row, Col, Input, Button, Tabs, Select, Upload, Table } from 'antd';
import styles from './UserInfo.less';
import 'remixicon/fonts/remixicon.css';
import moment from 'moment';
import config from "../../../config/config";

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

/**
 * 顶部主菜单及其内容
 */
const UserBasicCard = (props) => {

  const {
    onSaveUserInfo, onCloseUserInfo, userInfoVo, cacheUserData, userRelateVo, onTabChange
  } = props;

  const [form] = Form.useForm();
  const {getFieldDecorator, getFieldsValue, validateFields, resetFields} = form;

  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
  };
  const singleFormItemLayout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 21 },
  };

  const iconStyle = {
    verticalAlign: "bottom",
    marginRight: "5px",
  };

  const uploadIconStyle = {
    verticalAlign: "bottom",
    marginRight: "5px",
    fontSize: "40px",
  }

  const uploadProps = {
    name: "PictureToolBar",
    listType: "picture-card",
    className: "avatar-uploader",
    showUploadList: false,
    beforeUpload: (file) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = function (event) {
        let base64 = event.target.result;
        userInfoVo.imgBase64 = base64;
        cacheUserData(userInfoVo);
      }
    },
  }

  const uploadButton = (
    <div>
      <i className={"ri-user-line"} style={uploadIconStyle} />
      <div style={{ marginTop: 0 }}>上传头像</div>
    </div>
  )

  const buildUserBasic = () => {
    return (
      <div>
        <Form initialValues={userInfoVo ? userInfoVo : null} style={{margin: "20px 0px 0px 0px"}}>
          <Row>
            <Col span={12}>
              <Row>
                <Col span={24}>
                  <FormItem {...formItemLayout} label="用户名称" name={"userName"}
                            rules={[{required: true, message: '请输入用户名称'}]}>
                    <Input placeholder={"请输入用户名称"} disabled={"disabled"}/>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={24}>
                  <FormItem {...formItemLayout} label="手机号码" name={"phoneNumber"}
                            rules={[{required: true, message: '请输入手机号码'}]}>
                    <Input placeholder={"请输入手机号码"}/>
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={12}>
              <Upload {...uploadProps} className={styles.uploadDiv}>
                {
                  userInfoVo.imgBase64 ?
                    <img src={userInfoVo.imgBase64} alt="avatar" style={{width: '28%'}}/> : uploadButton
                }
              </Upload>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem {...formItemLayout} label="邮箱地址" name={"email"}
                        rules={[{required: true, message: '请输入用户名'}]}>
                <Input placeholder={"请输入用户名"}/>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem {...formItemLayout} label="旧密码" name={"password"}
                        rules={[{required: true, message: '请输入旧密码'}]}>
                <Input placeholder={"请输入旧密码"}/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem {...formItemLayout} label="新密码" name={"newPassword"}
                        rules={[{required: true, message: '请输入新密码'}]}>
                <Input placeholder={"请输入新密码"}/>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem {...formItemLayout} label="确认密码" name={"newPassword"}
                        rules={[{required: true, message: '请输入确认密码'}]}>
                <Input placeholder={"请输入确认密码"}/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <FormItem {...singleFormItemLayout} label="个人简介" name={"resume"} rules={[{required: false}]}>
                <Input.TextArea placeholder={"请输入个人简介，最长500个字"}/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <FormItem {...singleFormItemLayout} label="个性标签" name={"individual"} rules={[{required: false}]}>
                <Select mode="tags" placeholder="请输入个性标签，最长100个字" style={{width: '100%'}}/>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <div style={{textAlign: "center"}}>
          <Button type={"primary"} icon={<i className="ri-save-3-line" style={iconStyle}/>}
                  onClick={onSaveUserInfo}>保存</Button>
          <Button type={"danger"} icon={<i className="ri-close-circle-line" style={iconStyle}/>}
                  style={{marginLeft: "10px"}} onClick={onCloseUserInfo}>关闭</Button>
        </div>
      </div>
    );
  }

  const buildUserRelate = () => {
    const buildColumns = (name) => [
      { title: '序号', width: '8%', render: (text, record, index) => index + 1 },
      { title: name, dataIndex: 'targetName', key: 'targetName', width: '20%',
        render: (text, record, index) => {
          let unitTypeObj = config.UNIT_TYPE.find(item => item.key == record.type) || {};
          return (
            <div>
              <span style={{background: unitTypeObj.color}}>{unitTypeObj.value}</span>
              <span style={{marginLeft: 10}}>{record.targetName}</span>
            </div>
          );
        }
      },
      {title: '业务描述', dataIndex: 'subjectName', key: 'subjectName', width: '25%'},
      {
        title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: '10%',
        render: (text, record, index) => {
          const createTime = text ? text.replace("T", " ") : "";
          const result = moment(createTime).format("YYYY-MM-DD");
          return (<span>{result}</span>);
        }
      }
    ];

    return (
      <div>
        <Row>
          <Col span={12} style={{ display: "flex" }}>
            <Col span={4}>租户：</Col>
            <Col span={20}>{userRelateVo?.tenantName}</Col>
          </Col>
          <Col span={12} style={{ display: "flex" }}>
            <Col span={4}>应用：</Col>
            <Col span={20}>{userRelateVo?.appName}</Col>
          </Col>
        </Row>
        <Row>
          <Col span={2}>角色：</Col>
          <Col span={22} className={styles.listTable}>
            <Table
              bordered
              columns={buildColumns("角色名称")}
              defaultExpandAllRows={true}
              dataSource={userRelateVo?.roleRelateList}
              pagination={false}
              rowKey={record => record.id}
              scroll={{y: (window.innerHeight - 300) / 2 }}
            />
          </Col>
        </Row>
        <Row>
          <Col span={2}>组织：</Col>
          <Col span={22} className={styles.listTable}>
            <Table
              bordered
              columns={buildColumns("组织名称")}
              defaultExpandAllRows={true}
              dataSource={userRelateVo?.postRelateList}
              pagination={false}
              rowKey={record => record.id}
              scroll={{y: (window.innerHeight - 100) / 2 }}
            />
          </Col>
        </Row>
      </div>
    );
  }

  const buildUserLimit = () => {
    const buildColumns = (firstName, secondName) => [
      { title: '序号', width: '8%', render: (text, record, index) => index + 1 },
      { title: firstName, dataIndex: 'targetName', key: 'targetName', width: '20%' },
      { title: secondName, dataIndex: 'subjectName', key: 'subjectName', width: '25%',
        render: (text, record, index) => {
          let unitTypeObj = config.UNIT_TYPE.find(item => item.key == record.type) || {};
          return (
            <div>
              <span style={{background: unitTypeObj.color}}>{unitTypeObj.value}</span>
              <span style={{marginLeft: 10}}>{record.subjectName}</span>
            </div>
          );
        }
      },
      {
        title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: '10%',
        render: (text, record, index) => {
          const createTime = text ? text.replace("T", " ") : "";
          const result = moment(createTime).format("YYYY-MM-DD");
          return (<span>{result}</span>);
        }
      }
    ];

    const tableHeight = (window.innerHeight - 235) / 2;

    return (
      <div>
        <Row>
          <Col span={2}>角色：</Col>
          <Col span={22} className={styles.listTable}>
            <Table
              bordered
              columns={buildColumns("角色名称", "菜单名称")}
              defaultExpandAllRows={true}
              dataSource={userRelateVo?.rolelimitList}
              pagination={false}
              rowKey={record => record.id}
              scroll={{y: tableHeight }}
            />
          </Col>
        </Row>
        <Row>
          <Col span={2}>组织：</Col>
          <Col span={22} className={styles.listTable}>
            <Table
              bordered
              columns={buildColumns("岗位名称", "组织名称")}
              defaultExpandAllRows={true}
              dataSource={userRelateVo?.postLimitList}
              pagination={false}
              rowKey={record => record.id}
              scroll={{y: tableHeight }}
            />
          </Col>
        </Row>
      </div>
    );
  }

  return (
    <div id={"userAuthorization"} className={styles.userInfoUpdate}>
      <Tabs defaultActiveKey={"basicInfo"} style={{padding: "0px 20px 20px 20px"}} onChange={onTabChange}>
        <TabPane tab={<span><i className={"ri-user-line"} style={iconStyle}/>&nbsp;基本信息</span>} key={"basic"}>
        { buildUserBasic() }
        </TabPane>
        <TabPane tab={<span><i className={"ri-windows-line"} style={iconStyle}/>&nbsp;组织数据</span>} key={"organize"}>
          { buildUserRelate() }
        </TabPane>
        <TabPane tab={<span><i className={"ri-windows-line"} style={iconStyle}/>&nbsp;权限数据</span>} key={"limit"}>
          { buildUserLimit() }
        </TabPane>
        <TabPane tab={<span><i className={"ri-database-line"} style={iconStyle}/>&nbsp;账号绑定</span>} key={"account"}>
          <div style={{width: "93%", overflow: "auto", height: "350px"}}>暂无数据</div>
        </TabPane>
      </Tabs>
    </div>
  )
};

export default UserBasicCard;
